<template>
    <div>
        <page-main>
            <!-- tabs -->
            <el-tabs v-model="searchType" type="card" class="demo-tabs" @tab-click="tabChange">
                <!-- 搜索 -->
                <el-tab-pane v-if="!is_feed" label="计划" name="1" />
                <el-tab-pane v-if="!is_feed" label="单元" name="2" />
                <el-tab-pane v-if="!is_feed" label="关键词" name="3" />
                <el-tab-pane v-if="!is_feed" label="创意" name="4" />
                <!-- 信息流 -->
                <el-tab-pane v-if="is_feed" label="计划" name="5" />
                <el-tab-pane v-if="is_feed" label="单元" name="6" />
                <el-tab-pane v-if="is_feed" label="创意" name="7" />
                
                <el-tab-pane label="消费记录" name="8" />
            </el-tabs>
            <!-- 筛选栏 -->
            <search-bar>
                <el-form :model="search" size="small" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="线索创建时间">
                                <el-date-picker
                                    v-model="search.date"
                                    type="daterange"
                                    :picker-options="pickerOptions"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    @change="handleDateChange"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" @click="getList">查询</el-button>
                                <el-button @click="handleReset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </search-bar>
        </page-main>
        <page-main>
            <!-- 表格 table -->
            <el-table v-if="searchType==1" ref="table" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <el-table-column prop="campaignName" fixed label="计划名称" />
                <!-- <el-table-column prop="info_msg.budget" label="计划每日预算" />
                <el-table-column prop="info_msg.budgetOfflineTime" label="预算下线时间" />
                <el-table-column prop="info_msg.negativeWords" label="短语否定关键词列表" />
                <el-table-column prop="info_msg.pause" label="暂停状态" />
                <el-table-column prop="info_msg.adType" label="计划类型" />
                <el-table-column prop="info_msg.businessPointId" label="推广业务ID" />
                <el-table-column prop="info_msg.businessPointName" label="推广业务字面" />
                <el-table-column prop="info_msg.smartRegion" label="商品计划:智能地域开关" />
                <el-table-column prop="info_msg.os" label="商品计划:计划投放设备平台" />
                <el-table-column prop="info_msg.shopType" label="电商店铺类型" />
                <el-table-column prop="info_msg.createTime" label="添加时间" />
                <el-table-column prop="info_msg.equipmentType" label="推广设备" />
                <el-table-column prop="info_msg.campaignBidType" label="计划出价方式" />
                <el-table-column prop="info_msg.campaignBid" label="计划点击出价" />
                <el-table-column prop="info_msg.campaignOcpcBidType" label="计划出价模式" />
                <el-table-column prop="info_msg.campaignOcpcBid" label="转化计划出价" /> -->
                <el-table-column prop="click_data.date" label="日期" />
                <el-table-column prop="click_data.impression" label="展现" />
                <el-table-column prop="click_data.click" label="点击" />
                <el-table-column prop="click_data.cost" label="消费" />
                <el-table-column prop="click_data.ctr" label="点击率" />
                <el-table-column prop="click_data.cpc" label="平均点击价格" />
            </el-table>
            <el-table v-if="searchType==2" ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <!-- <el-table-column prop="adgroupId" fixed label="推广单元ID" width="110px" />
                <el-table-column prop="campaignId" fixed label="推广计划ID" width="120px" /> -->
                <el-table-column prop="campaignName" label="计划名称" />
                <el-table-column prop="info_msg.adgroupName" label="单元名称" />
                <!-- <el-table-column prop="pause" label="推广单元启用/暂停" />
                <el-table-column prop="appShopDirectStatus" label="应用商店直投" />
                <el-table-column prop="maxPrice" label="单元出价" />
                <el-table-column prop="negativeWords" label="单元短语否定关键词" />
                <el-table-column prop="exactNegativeWords" label="单元精确否定关键词" />
                <el-table-column prop="status" label="单元状态" />
                <el-table-column prop="segmentRecommendStatus" label="自动配图开关" />
                <el-table-column prop="creativeTextOptimizationStatus" label="自动文案优化" />
                <el-table-column prop="offlineReasons" label="下线理由" />
                <el-table-column prop="paPrice" label="推广单元商品出价" />
                <el-table-column prop="adType" label="广告类型" />
                <el-table-column prop="monitorUrl" label="单元层级监控" />
                <el-table-column prop="pcFinalUrl" label="计算机最终访问网址" />
                <el-table-column prop="pcTrackParam" label="计算机监控后缀" />
                <el-table-column prop="pcTrackTemplate" label="计算机第三方追踪模板" />
                <el-table-column prop="mobileFinalUrl" label="移动最终访问网址" />
                <el-table-column prop="mobileTrackParam" label="移动监控后缀" />
                <el-table-column prop="mobileTrackTemplate" label="移动第三方追踪模板url" />
                <el-table-column prop="productSetId" label="虚拟商品组id" />
                <el-table-column prop="createTime" label="添加时间" />
                <el-table-column prop="adgroupAutoTargetingStatus" label="自动定向" /> -->
                <el-table-column prop="click_data.date" label="日期" />
                <el-table-column prop="click_data.impression" label="展现" />
                <el-table-column prop="click_data.click" label="点击" />
                <el-table-column prop="click_data.cost" label="消费" />
                <el-table-column prop="click_data.ctr" label="点击率" />
                <el-table-column prop="click_data.cpc" label="平均点击价格" />
            </el-table>
            <el-table v-if="searchType==3" ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <!-- <el-table-column prop="keywordId" fixed label="关键词ID" width="110px" />
                <el-table-column prop="campaignId" fixed label="推广计划ID" width="120px" />
                <el-table-column prop="adgroupId" label="推广单元ID" /> -->
                <el-table-column prop="keyword" label="关键词" />
                <!-- <el-table-column prop="price" label="关键词竞价价格" />
                <el-table-column prop="pause" label="启用/暂停关键词" />
                <el-table-column prop="matchType" label="匹配模式" />
                <el-table-column prop="phraseType" label="细分匹配模式" />
                <el-table-column prop="status" label="关键词状态" />
                <el-table-column prop="apiInefficient" label="是否低效关键词" />
                <el-table-column prop="pcDestinationUrl" label="计算机访问网址" />
                <el-table-column prop="mobileDestinationUrl" label="移动访问网址" />
                <el-table-column prop="tabs" label="关键词物料标签数组" />
                <el-table-column prop="leftPriceGuide" label="计算机指导价" />
                <el-table-column prop="mPriceGuide" label="移动指导价" />
                <el-table-column prop="miniProgramUrl" label="小程序访问网址" />
                <el-table-column prop="offlineReasons" label="物料推广下线原因" />
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column prop="deeplink" label="应用调起网址" />
                <el-table-column prop="quality" label="质量度" />
                <el-table-column prop="estimatedClickRate" label="预估点击率" />
                <el-table-column prop="businessRelationship" label="创意相关性" />
                <el-table-column prop="landPageExperience" label="落地页体验" />
                <el-table-column prop="pcFinalUrl" label="计算机最终访问网址" />
                <el-table-column prop="pcTrackParam" label="计算机监控后缀" />
                <el-table-column prop="pcTrackTemplate" label="计算机第三方追踪模板" />
                <el-table-column prop="mobileFinalUrl" label="移动最终访问网址" />
                <el-table-column prop="mobileTrackParam" label="移动监控后缀" />
                <el-table-column prop="mobileTrackTemplate" label="移动第三方追踪模板" /> -->
                <el-table-column prop="click_data.date" label="日期" />
                <el-table-column prop="click_data.impression" label="展现" />
                <el-table-column prop="click_data.click" label="点击" />
                <el-table-column prop="click_data.cost" label="消费" />
                <el-table-column prop="click_data.ctr" label="点击率" />
                <el-table-column prop="click_data.cpc" label="平均点击价格" />
            </el-table>
            <el-table v-if="searchType==4" ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <el-table-column label="创意">
                    <template #default="scope">
                        <span :title="scope.row.title" class="cy-text" @click="cyClick(scope.row)">{{ scope.row.title }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="title" label="计划名称" /> -->
                <el-table-column prop="adgroupName" label="单元名称" />
                <!-- <el-table-column prop="budget" label="推广计划预算" />
                <el-table-column prop="starttime" label="推广开始时间" />
                <el-table-column prop="endtime" label="推广结束时间" />
                <el-table-column prop="schedule" label="推广计划暂停时段" />
                <el-table-column prop="pause" label="计划启停" />
                <el-table-column prop="status" label="推广计划状态" />
                <el-table-column prop="bstype" label="物料类型" />
                <el-table-column prop="campaignType" label="计划类型" />
                <el-table-column prop="addtime" label="添加时间" />
                <el-table-column prop="eshopType" label="交易所在平台" />
                <el-table-column prop="shadow" label="计划影子的APP信息" />
                <el-table-column prop="budgetOfflineTime" label="当天计划预算下线最近一次的时间" />
                <el-table-column prop="rtaStatus" label="是否开通RTA" />
                <el-table-column prop="bid" label="出价" />
                <el-table-column prop="bidtype" label="出价方式" />
                <el-table-column prop="ftypes" label="投放范围" />
                <el-table-column prop="ocpc" label="oCPC信息" />
                <el-table-column prop="unefficientCampaign" label="低效计划" />
                <el-table-column prop="campaignOcpxStatus" label="计划学习状态" />
                <el-table-column prop="heritAscriptionTypegn" label="继承归属" />
                <el-table-column prop="inheritUserids" label="继承优质计划账户id集合" />
                <el-table-column prop="inheritCampaignInfos" label="继承优质计划的计划信息集合" />
                <el-table-column prop="bmcUserId" label="商品中心用户ID" />
                <el-table-column prop="catalogId" label="商品目录ID" />
                <el-table-column prop="productType" label="产品库类型" />
                <el-table-column prop="projectFeedId" label="项目ID" />
                <el-table-column prop="useLiftBudget" label="是否开启一键起量" />
                <el-table-column prop="liftBudget" label="起量预算" />
                <el-table-column prop="liftStatus" label="起量状态" />
                <el-table-column prop="deliveryType" label="投放场景" />
                <el-table-column prop="appSubType" label="应用推广子类型" />
                <el-table-column prop="miniProgramType" label="小程序子类型" />
                <el-table-column prop="bidMode" label="出价模式" />
                <el-table-column prop="productIds" label="产品ID" /> -->
                <el-table-column prop="click_data.date" label="日期" />
                <el-table-column prop="click_data.impression" label="展现" />
                <el-table-column prop="click_data.click" label="点击" />
                <el-table-column prop="click_data.cost" label="消费" />
                <el-table-column prop="click_data.ctr" label="点击率" />
                <el-table-column prop="click_data.cpc" label="平均点击价格" />
            </el-table>
            <el-table v-if="searchType==5" ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <!-- <el-table-column prop="campaignFeedId" fixed label="信息流计划Id" width="110px" /> -->
                <el-table-column prop="campaignFeedName" label="信息流计划名称" />
                <!-- <el-table-column prop="budget" label="推广计划预算" />
                <el-table-column prop="starttime" label="推广开始时间" />
                <el-table-column prop="endtime" label="推广结束时间" />
                <el-table-column prop="schedule" label="推广计划暂停时段" />
                <el-table-column prop="pause" label="计划启停" />
                <el-table-column prop="status" label="推广计划状态" />
                <el-table-column prop="bstype" label="物料类型" />
                <el-table-column prop="campaignType" label="计划类型" />
                <el-table-column prop="addtime" label="添加时间" />
                <el-table-column prop="eshopType" label="交易所在平台" />
                <el-table-column prop="shadow" label="计划影子的APP信息" />
                <el-table-column prop="budgetOfflineTime" label="当天计划预算下线最近一次的时间" />
                <el-table-column prop="rtaStatus" label="是否开通RTA" />
                <el-table-column prop="bid" label="出价" />
                <el-table-column prop="bidtype" label="出价方式" />
                <el-table-column prop="ftypes" label="投放范围" />
                <el-table-column prop="ocpc" label="oCPC信息" />
                <el-table-column prop="unefficientCampaign" label="低效计划" />
                <el-table-column prop="campaignOcpxStatus" label="计划学习状态" />
                <el-table-column prop="heritAscriptionTypegn" label="继承归属" />
                <el-table-column prop="inheritUserids" label="继承优质计划账户id集合" />
                <el-table-column prop="inheritCampaignInfos" label="继承优质计划的计划信息集合" />
                <el-table-column prop="bmcUserId" label="商品中心用户ID" />
                <el-table-column prop="catalogId" label="商品目录ID" />
                <el-table-column prop="productType" label="产品库类型" />
                <el-table-column prop="projectFeedId" label="项目ID" />
                <el-table-column prop="useLiftBudget" label="是否开启一键起量" />
                <el-table-column prop="liftBudget" label="起量预算" />
                <el-table-column prop="liftStatus" label="起量状态" />
                <el-table-column prop="deliveryType" label="投放场景" />
                <el-table-column prop="appSubType" label="应用推广子类型" />
                <el-table-column prop="miniProgramType" label="小程序子类型" />
                <el-table-column prop="bidMode" label="出价模式" />
                <el-table-column prop="productIds" label="产品ID" /> -->
                <el-table-column prop="click_data.date" label="日期" />
                <el-table-column prop="click_data.impression" label="展现" />
                <el-table-column prop="click_data.click" label="点击" />
                <el-table-column prop="click_data.cost" label="消费" />
                <el-table-column prop="click_data.ctr" label="点击率" />
                <el-table-column prop="click_data.cpc" label="平均点击价格" />
            </el-table>
            <el-table v-if="searchType==6" ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <!-- <el-table-column prop="adgroupFeedId" fixed label="推广单元ID" width="110px" />
                <el-table-column prop="campaignFeedId" fixed label="推广计划ID" width="120px" /> -->
                <el-table-column prop="adgroupFeedName" label="推广单元名称" />
                <el-table-column prop="campaignFeedName" fixed label="信息流计划名称" />
                <!-- <el-table-column prop="pause" label="推广单元启用/暂停" />
                <el-table-column prop="status" label="推广单元状态" />
                <el-table-column prop="bid" label="出价" />
                <el-table-column prop="ftypes" label="投放范围" />
                <el-table-column prop="bidtype" label="优化目标和付费模式" />
                <el-table-column prop="ocpc" label="oCPC信息" />
                <el-table-column prop="atpFeedId" label="定向包ID" />
                <el-table-column prop="addtime" label="添加时间" />
                <el-table-column prop="modtime" label="修改时间" />
                <el-table-column prop="deliveryType" label="投放场景" />
                <el-table-column prop="unefficientAdgroup" label="低效单元" />
                <el-table-column prop="productSetId" label="商品组ID" />
                <el-table-column prop="ftypeSelection" label="是否使用计划流量" />
                <el-table-column prop="bidSource" label="是否使用计划出价" />
                <el-table-column prop="unitOcpxStatus" label="单元学习状态" />
                <el-table-column prop="atpName" label="定向包名称" /> -->
                <el-table-column prop="click_data.date" label="日期" />
                <el-table-column prop="click_data.impression" label="展现" />
                <el-table-column prop="click_data.click" label="点击" />
                <el-table-column prop="click_data.cost" label="消费" />
                <el-table-column prop="click_data.ctr" label="点击率" />
                <el-table-column prop="click_data.cpc" label="平均点击价格" />
            </el-table>
            <el-table v-if="searchType==7" ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <!-- <el-table-column prop="creativeFeedId" fixed label="创意id" width="110px" />
                <el-table-column prop="adgroupFeedId" fixed label="推广单元id" width="120px" />
                <el-table-column prop="materialstyle" label="样式" /> -->
                <el-table-column label="创意">
                    <template #default="scope">
                        <el-popover
                            placement="bottom-center"
                            trigger="hover"
                        >   
                            <span><a :href="scope.row.info_msg.material.video_url" target="_blank" rel="noopener noreferrer">预览</a></span>
                            <template #reference>
                                <div class="tag-box">
                                    <img :src="scope.row.info_msg.material.poster">
                                    <p>{{ scope.row.creativeFeedName }}</p>
                                </div>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="creativeFeedName" label="创意名称" /> -->
                <el-table-column prop="adgroupFeedId" label="创意ID" />
                <!-- <el-table-column prop="pause" label="暂停/启用创意" />
                <el-table-column prop="material" label="物料内容" />
                <el-table-column prop="status" label="创意状态" />
                <el-table-column prop="refusereason" label="拒绝原因" />
                <el-table-column prop="expmask" label="产品标示位" />
                <el-table-column prop="changeorder" label="三图换顺序开关" />
                <el-table-column prop="commentnum" label="显示评论数开关" />
                <el-table-column prop="readnum" label="显示阅读数开关" />
                <el-table-column prop="playnum" label="显示播放数开关" />
                <el-table-column prop="ideaType" label="创意类型" />
                <el-table-column prop="showMt" label="程序化创意展示样式" />
                <el-table-column prop="addtime" label="创意添加时间" />
                <el-table-column prop="progFlag" label="程序化创意工具标识" />
                <el-table-column prop="approvemsgnew" label="格式化的拒绝理由" />
                <el-table-column prop="auditTimeModel" label="审核预估时间" />
                <el-table-column prop="naUrlGenerationType" label="na url产生类型" /> -->
                <el-table-column prop="click_data.date" label="日期" />
                <el-table-column prop="click_data.impression" label="展现" />
                <el-table-column prop="click_data.click" label="点击" />
                <el-table-column prop="click_data.cost" label="消费" />
                <el-table-column prop="click_data.ctr" label="点击率" />
                <el-table-column prop="click_data.cpc" label="平均点击价格" />
            </el-table>
            <el-table v-if="searchType==8" ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <el-table-column prop="name" label="账户名称" />
                <el-table-column prop="times" label="时间" />
                <el-table-column prop="use_money" label="使用金额" />
                <el-table-column prop="money" label="剩余金额" />
            </el-table>
            <!-- 分页 -->
            <div style="margin-top: 20px; text-align: right;">
                <el-pagination
                    :current-page="search.pages"
                    :page-size="search.limit"
                    :total="search.total"
                    :page-sizes="[10, 20, 50, 100]"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </page-main>
    </div>
</template>

<script>
import { baiduSearchJihua, baiduSearchDanyuan, baiduSearchKeyword, baiduSearchChuangyi, baiduXinxiChuangyi, baiduXinxiDanyuan, baiduXinxiJihua, baiduMoneyLog } from '@/api/advertisement'
export default {
    name: '',
    filters: {
        typeFilter(val) {
            const map = {
                1: '体验',
                2: '新购',
                3: '增购',
                4: '复购'
            }
            return map[val]
        },
        statusFilter(val) {
            const map = {
                1: '进行中',
                2: '已完成'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: true,
            searchType: null,
            is_feed: false,
            search: {
                account: '',
                account_id: '',
                date: [],
                start: '',
                end: '',
                pages: 1,
                limit: 10,
                total: 0
            },
            pickerOptions: {
                onPick: ({ maxDate, minDate }) => {
                    this.curDate = minDate.getTime()
                    if (maxDate) {
                        this.curDate = ''
                    }
                },
                disabledDate: time => {
                    if (this.curDate) {
                        const one = 30 * 24 * 3600 * 1000
                        const minTime = this.curDate - one
                        const maxTime = this.curDate + one
                        return time.getTime() < minTime || time.getTime() > maxTime
                    }
                }
            },
            dataList: []
        }
    },
    mounted() {
        if (this.$route.query.id && this.$route.query.is_feed) {
            this.search.account = this.$route.query.id;
            this.search.account_id = this.$route.query.id;
            if (this.$route.query.is_feed == '1') {
                this.is_feed = true;
                this.searchType = '5';
            } else {
                this.searchType = '1';
                this.is_feed = false;
            }
            this.getList();
        } else {
            this.$message({ type: 'error', message: '参数错误！'});
        }
    },
    methods: {
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.search.start = '';
            this.search.end = '';
            this.search.pages = 1;
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            if (this.searchType == '1') {
                baiduSearchJihua(this.search).then(res => {
                    if (res.status == 1) {
                        this.dataList = res.data.list || [];
                        this.search.total = Number(res.data.count);
                    }
                    this.loading = false;
                })
            } else if (this.searchType == '2') {
                baiduSearchDanyuan(this.search).then(res => {
                    if (res.status == 1) {
                        this.dataList = res.data.list || [];
                        this.search.total = Number(res.data.count);
                    }
                    this.loading = false;
                })
            } else if (this.searchType == '3') {
                baiduSearchKeyword(this.search).then(res => {
                    if (res.status == 1) {
                        this.dataList = res.data.list || [];
                        this.search.total = Number(res.data.count);
                    }
                    this.loading = false;
                })
            } else if (this.searchType == '4') {
                baiduSearchChuangyi(this.search).then(res => {
                    if (res.status == 1) {
                        this.dataList = res.data.list || [];
                        this.search.total = Number(res.data.count);
                    }
                    this.loading = false;
                })
            } else if (this.searchType == '5') {
                baiduXinxiJihua(this.search).then(res => {
                    if (res.status == 1) {
                        this.dataList = res.data.list || [];
                        this.search.total = Number(res.data.count);
                    }
                    this.loading = false;
                })
            } else if (this.searchType == '6') {
                baiduXinxiDanyuan(this.search).then(res => {
                    if (res.status == 1) {
                        this.dataList = res.data.list || [];
                        this.search.total = Number(res.data.count);
                    }
                    this.loading = false;
                })
            } else if (this.searchType == '7') {
                baiduXinxiChuangyi(this.search).then(res => {
                    if (res.status == 1) {
                        this.dataList = res.data.list || [];
                        this.search.total = Number(res.data.count);
                    }
                    this.loading = false;
                })
            } else if (this.searchType == '8') {
                baiduMoneyLog(this.search).then(res => {
                    if (res.status == 1) {
                        this.dataList = res.data.list || [];
                        this.search.total = Number(res.data.count);
                    }
                    this.loading = false;
                })
            }
        },
        // tab切换
        tabChange(e) {
            this.searchType = e.name;
            this.search.pages = 1;
            this.getList();
        },
        handleDateChange(e) {
            this.search.start = e ? e[0] : ''
            this.search.end = e ? e[1] : ''

            this.search.start_time = e ? e[0] : ''
            this.search.end_time = e ? e[1] : ''
        },
        cyClick(row) {
            window.open(row.pcDestinationUrl)
        }
    }
}
</script>
<style lang="scss" scoped>
.cy-text {
    width: 300px;
    word-break: break-all;
    cursor: pointer;
}
.tag-box {
    display: flex;
    align-items: center;
    height: 50px;
    img {
        height: 50px;
        border-radius: 4px;
        float: left;
    }
    p {
        margin-left: 5px;
    }
}
</style>
